<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Async ball</title>
    <style>
        .ball1 {
            width: 50px;
            height: 50px;
            background-color: aqua;
            border-radius: 50%;
            transform: translateX(0);
        }

        .ball2 {
            width: 50px;
            height: 50px;
            background-color: darkorange;
            border-radius: 50%;
            transform: translateX(0);
        }

        .ball3 {
            width: 50px;
            height: 50px;
            background-color: slategrey;
            border-radius: 50%;
            transform: translateX(0);
        }
    </style>
</head>

<body>
    <div class="ball ball1" style="margin-left: 0"></div>
    <div class="ball ball2" style="margin-left: 0"></div>
    <div class="ball ball3" style="margin-left: 0"></div>
    <script type="text/javascript">
        let ball1 = document.querySelector(".ball1");
        let ball2 = document.querySelector(".ball2");
        let ball3 = document.querySelector(".ball3");

        
        // callback 用法的 demo
        // function move(ball, target, cb) {
        //     setTimeout(function () {
        //         let marginLeft = parseInt(ball.style.marginLeft, 10);
        //         if (marginLeft === target) {
        //             cb && cb()
        //             return;
        //         } else {
        //             if (marginLeft < target) {
        //                 marginLeft++;
        //             } else {
        //                 marginLeft--;
        //             }
        //         }
        //         ball.style.marginLeft = marginLeft + 'px';
        //         move(ball, target, cb)
        //     }, 13)
        // }
        // move(ball1, 100, function () {
        //     move(ball2, 100, function () {
        //         move(ball3, 100, function () {

        //         })
        //     })
        // })



        // // Promise 用法的 demo
        // function move(ball, target) {
        //     // TODO
        //     return new Promise(function(resolve,reject) {
        // 				function animate(){
        // 				setTimeout(function(){
        // 				let marginLeft = parseInt(ball.style.marginLeft,10);
        // 				if(marginLeft === target){
        // 					resolve()
        // 					return;
        // 				}else{
        // 					if(marginLeft < target){
        // 						marginLeft++;
        // 					}else{
        // 						marginLeft--;
        // 					}
        // 				}
        // 				ball.style.marginLeft = marginLeft + 'px';
        // 				animate();
        // 			},13)
        // 		}
        // 		animate();
        // 	})
        // }
        // move(ball1,100)
        // .then(function(){
        // 	return move(ball2,100)
        // })
        // .then(function(){
        // 	return move(ball3,100)
        // })





        // async/await 用法的 demo

        // function move(ball, target, cb) {
        //     setTimeout(function () {
        //         let marginLeft = parseInt(ball.style.marginLeft, 10);
        //         if (marginLeft === target) {
        //             cb && cb()
        //             return;
        //         } else {
        //             if (marginLeft < target) {
        //                 marginLeft++;
        //             } else {
        //                 marginLeft--;
        //             }
        //         }
        //         ball.style.marginLeft = marginLeft + 'px';
        //         move(ball, target, cb)
        //     }, 13)
        // }

        // async function go(){
        //     await new Promise((res,rej)=>{
        //         move(ball1,100,()=>{
        //             res()
        //         })
        //     })
        //     await new Promise((res,rej)=>{
        //         move(ball2,100,()=>{
        //             res()
        //         })
        //     })
        //     await new Promise((res,rej)=>{
        //         move(ball3,100,()=>{
        //             res()
        //         })
        //     })
        // }
        // go()
  

    


    </script>
</body>

</html>